<template lang="pug">
  .modal-dialog-lg.modal-answer.bs-example-modal-lg(role='document', v-show="qrcode")
    .modal-content
      .modal-header
        .modal-title 您当前选择47名学生
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
    .modal-body
      .qr-list
        .qr-item
          .qr-title 依次生成学生二维码
          .qr-content
            .content-left
            .content-right 小红
          .qr-eg 例子：每人生成一张二维码
          .qr-count 每人 X 张二维码标签

        .qr-item
          .qr-title 每人生成一整页二维码
          .qr-content
            .content-left
            .content-right 小红
          .qr-eg 例子：整页生成小明二维码
          .qr-count 一整页包含56张二维码标签      

      .qr-btn
        a 确定


</template>
<style lang="scss">
input,button,select,textarea{outline:none;}

.modal-answer {
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  width: 960px;
  border-radius: 10px;
  .modal-content {
    border-radius: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    .modal-header {
      padding: 0;
      .modal-title {
        font-size: 14px;
        margin: 0 auto;
        height: 48px;
        line-height: 48px;
      }
      .close {
        cursor: pointer;
        color: #157EF2;
        font-weight: 300;
        position: absolute;
        right: 10px;
        top: 12px;    
      }
    }
  }
  .modal-body {
    padding-left: 124px;
    padding-right: 124px;
    margin-top: 60px;
    .qr-list {
      overflow: hidden;
      .qr-item {
        width: 300px;
        border: 1px solid #167EF2;
        border-radius: 10px;
        background-color: #fafafa;
        float: left;
        padding-left: 28px;
        
        .qr-title {
          font-size: 14px;
          color: #000;
          margin-bottom: 38px;
          text-align: center;
          margin-top: 18px;
        }
        .qr-content {
          height: 142px;
          .content-left {
            width: 142px;
            height: 142px;
            float: left;
            background-color: #f2f3f5;
            border-radius: 10px;
            border: 1px solid #fafafa;
          }
          .content-right {
            margin-left: 14px;
            float: left;
          }
        }
        .qr-eg {
          clear: both;
          color: #a5a5a5;
          font-size: 12px;
          margin: 12px auto 24px;
          text-align: center;
        }
        .qr-count {
          font-size: 14px;
          color: #000;
          text-align: center;
          margin-bottom: 24px;
        }     
      }
      .qr-item:nth-child(even) {
        margin-left: 100px;
      }
    }

    .qr-btn {
      margin: 60px auto 42px;
      a {
        display: block;
        width: 138px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border: 1px solid #167ef2;
        border-radius: 6px;
        cursor: pointer;
        margin: 0 auto;
      }
      a:hover {
        background-color: #167ef2;
        color: #fff;
      }
    }
  }

}

</style>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      people: [{
        name: '程子昂',
        id: 1,
        flag: 1
      }, {
        name: '程子昂',
        id: 1,
        flag: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }, {
        name: '程子昂',
        id: 1
      }]
    }
  },
  computed: mapState({
    qrcode: state => state.modal.qrcode
  }),
  mounted () {
  },
  methods: {
    close () {
      this.$store.commit('showQRCode', false)
    }
  }
}
</script>
